<template>
  <div id="homer">
    <!--头部开始-->
    <div class="top">
      <div class="logo">
        <div class="logo0">
          <img src="../assets/logo_03.jpg" />
        </div>
        <div class="wan">
          <p class="wld">万力达消防设备大卖场</p>
          <p class="tell">{{configData.mobile}}</p>
        </div>
      </div>
      <div class="menu">
        <img @click="hide = !hide" src="../assets/56.jpg" />
      </div>
    </div>
    <!--头部结束-->
    <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile?num=0">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile?num=1">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile?num=2">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile?num=3">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!--主体开始-->
    <div class="body1">
      <swiper class="swiper" :options="onlySwiper">
        <swiper-slide
          class="swiper-slide"
          v-for="item in bannerList"
          :key="item"
        >
          <img :src="item" alt />
          <!--    <div class="swiper-slide">
            <img src="../assets/banner1.jpg" alt />
          </div>
          <div class="swiper-slide">
            <img src="../assets/banner2.jpg" alt />
          </div>
          <div class="swiper-slide">
            <img src="../assets/banner3.jpg" alt />
          </div>
          <div class="swiper-slide">
            <img src="../assets/banner4.jpg" alt />
          </div> -->
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>

      <div class="sousuo0">
        <span>大家都在搜：
        <router-link to="/page/product_mobile?num=0"><span class="hand">消防水泵</span></router-link>
        &nbsp;&nbsp;<router-link to="/page/product_mobile?num=3"><span class="hand">火灾报警</span></router-link>
          &nbsp;&nbsp;<router-link to="/page/product_mobile?num=2"><span class="hand">气体灭火</span></router-link>
          &nbsp;&nbsp;<router-link to="/page/product_mobile?num=1"><span class="hand">消防泵控制柜</span></router-link></span>
        <div class="papa">
          <input type="text" class="sskk1"  v-model="search"/>
          <p class="sskk2" @click="goGoodsList">搜索</p>
        </div>
      </div>
      <div class="lunbo_foot">
        <div class="xuqiu">
          <h1>{{titleList[0].title}}</h1>
          <p>{{titleList[0].f_title}}</p>
        </div>
        <div class="xuqiutu">
          <img src="../assets/index.gif" />
        </div>
      </div>
    </div>
    <!--主体结束-->
    <!--优势开始-->
    <div class="advantage">
      <img src="../assets/797.png" />
    </div>
    <!--优势结束-->
    <!-- 横幅开始 -->
    <div class="slogann">
      <div class="hfk">
        <div class="dianhua">
          <img src="../assets/phone.jpg" />
          <h2>全国服务热线：{{configData.mobile}}</h2>
        </div>
        <input
          class="zixun"
          type="submit"
          value="立即咨询"
          @click="goimmediately()"
        />
      </div>
    </div>
    <!-- 横幅结束 -->
    <!-- 产品中心开始 -->
    <div class="product">
      <div class="product_top">
        <h1>{{titleList[3].title}}</h1>
        <p>{{titleList[3].f_title}}</p>
      </div>
      <div class="product_foot">
        <div class="product1" v-for="(item, index) in shopList" :key="index">
          <div class="more1" @click="goDetails(index)">
            <p>{{ item.name }}</p>
            <span>查看更多</span>
          </div>
          <div class="list0">
            <div
              class="list1"
              v-for="(im, index1) in item.get_goods"
              :key="index1"
              v-show="index1 < 2"
              @click="mouseOver(im.id)"
            >
              <div class="splb1">
                <img :src="im.img[0]" />
                <!-- <img src="../assets/113.jpg" /> -->
              </div>
              <div class="splb2">
                <p class="one_over">{{ im.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品中心结束 -->
    <!-- 横幅更多 -->
    <div class="more">
      <img src="../assets/663.jpg" />
    </div>
    <!--  横幅更多-->
    <!--资质开始-->
    <div class="tions">
      <div class="tions-top">
        <div class="tions1">
          <h1>{{titleList[4].title}}</h1>
          <p>{{titleList[4].f_title}}</p>
        </div>
        <div class="tions2">
          <ul>
            <li><img src="../assets/17.png" /></li>
            <li><img src="../assets/16.png" /></li>
            <li><img src="../assets/15.png" /></li>
            <li><img src="../assets/14.png" /></li>
          </ul>
        </div>
      </div>
      <!-- <img src="../assets/11_03.jpg" /> -->
      <div class="tions-foot">
        <div class="tions3">
          <h1>{{titleList[5].title}}</h1>
          <p>{{titleList[5].f_title}}</p>
        </div>
        <div class="tions4">
          <ul>
            <li><img src="../assets/3.png" /></li>
            <li><img src="../assets/4.png" /></li>
            <li><img src="../assets/5.png" /></li>
            <li><img src="../assets/6.png" /></li>
            <li><img src="../assets/7.png" /></li>
            <li><img src="../assets/8.png" /></li>
          </ul>
        </div>
        <!-- <img class="tp" src="../assets/11_07.jpg" /> -->
      </div>
    </div>
    <!--资质结束-->
    <!-- 客户见证 -->
    <div class="witness">
      <div class="witness_top">
        <h1>{{titleList[6].title}}</h1>
        <p>{{titleList[6].f_title}}</p>
      </div>
      <div class="witness_foot">
        <img src="../assets/99.jpg" />
      </div>
      <button class="btn" @click="goCk">查看更多>></button>
    </div>
    <!-- 客户见证 -->
    <!-- 横幅开始 -->
    <div class="slogann">
      <div class="hfk">
        <div class="dianhua">
          <img src="../assets/phone.jpg" />
          <h2>全国服务热线：{{configData.mobile}}</h2>
        </div>
        <input
          class="zixun"
          type="submit"
          value="立即咨询"
          @click="goimmediately()"
        />
      </div>
    </div>
    <!-- 横幅结束 -->
    <!-- 交易开始 -->
    <div class="transaction">
      <!-- <img src="../assets/top.jpg"> -->
      <h1>万力达消防设备大卖场批发交易进行中</h1>
      <p>20多年不懈专注，打造行业精品、口碑源于客户的见证</p>
    </div>
    <!-- 交易结束 -->
    <!-- 大卖场动态开始 -->
    <div class="dynamic">
      <div class="dynamic_top">
        <div class="dynamic-left">
          <p :class="{ active: index === 1 }" @click="index = 1">大卖场动态</p>
          <p :class="{ active: index === 2 }" @click="index = 2">大卖场百科</p>
        </div>
        <div class="dynamic-right">
          <p :class="{ active: index === 3 }" @click="chakan()">MORE</p>
        </div>
      </div>
      <div class="dynamic_foot" v-show="index === 1">
        <ul>
          <li
            v-for="(item, index) in newsList[0].get_article"
            :key="index"
            @click="goNews(item.id)"
          >
            <span>{{ item.time }}</span
            >{{ item.title }}
          </li>
          <!-- 以安全定价取信，靠以安全定价取信，靠规模立足行业</li>
          <li>以安全定价取信，靠以安全定价取信，靠规模立足行业</li>
          <li>以安全定价取信，靠以安全定价取信，靠规模立足行业</li>
          <li>以安全定价取信，靠以安全定价取信，靠规模立足行业</li> -->
        </ul>
      </div>
      <div
        class="dynamic_foot"
        v-show="index === 2"
        v-for="(item, index) in newsList[1].get_article"
        :key="index"
        @click="goNews(item.id)"
      >
        <span>{{ item.time }}</span
        >{{ item.title }}
      </div>
      <div class="dynamic_foot"></div>
      <button class="cha" @click="chakan()">查看更多>></button>
    </div>
    <!-- 大卖场动态结束 -->
    <!-- 关于我们 -->
    <div class="about">
      <div class="about_top">
        <img src="../assets/77.jpg" />
        <div class="about_con">
          <p class="contitle">{{titleList[8].f_title}}</p>
          <p class="contxt">{{titleList[8].description}}</p>
        </div>
        <p class="hezuo">合作证书</p>
      </div>
      <div class="about_foot">
        <div class="ondyswiper" style="position: relative">
          <swiper ref="swiper1" class="swiper1" :options="ondyswiper">
            <div class="swiper-slide">
              <img src="../assets/09.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/08.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/07.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/06.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/05.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/05.jpg" alt />
            </div>
            <div class="swiper-slide">
              <img src="../assets/06.jpg" alt />
            </div>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: "NavTab",
  components: {},

  data() {
    return {
      name: "",
      msg: "",
      navmoIndex: 0,
      hide: false,
      khjzList: "",
      khjzdata: "",
      ondyswiper: {
        slidesPerView: 3,
        spaceBetween: 40,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      index: 1,
      shopList: [],
      configData: {},
      bannerList: [],
      titleList: [],
      newsList: [],
      onlySwiper: {
        notNextTick: true,
        loop: true,
        autoplay: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: true,
        },
      },
      search: ''
    };
  },
  created() {
    document.title = '万力达消防设备大卖场'
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      /* this.$router.push("/page/home_mobile"); */
    } else {
      /*  this.$router.push("/"); */
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getBanner();
    this.getShopClass();
    this.getNews(0);
    this.getNews(1);
    this.getConfig();
  },
  methods: {
    goGoodsList () {
      this.$router.push({
        path: "/page/product_mobile",
        query: {
          search: this.search
        },
      });
    },
    prev() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.swiper.$swiper.slideNext();
    },
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
    mouseOver(id) {
      console.log(id);
      this.$router.push({
        path: "/page/details_mobile",
        query: {
          id: id,
        },
      });
    },
     getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
 
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getBanner() {
      //get 请求接口
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config/pages")
        .then((res) => {
          console.log("banner", res.data.result);
          this.bannerList = res.data.result.content[0].banner_img;
          this.titleList = res.data.result.content;
          // console.log(this.bannerList)
        })
        .catch((error) => {
          console.log(error);
        });
    },
    banner() {
      let swiper = new Swiper(".swiper-container", {
        loop: true,
        autoplay: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        // pagination: {
        //   el: '.swiper-pagination',
        // },
      });
    },
    getShopClass() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/home")
        .then((res) => {
          console.log("产品中心", res.data.result);
          this.shopList = res.data.result;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              if (item.get_goods.length > 0) {
                for (const im of item.get_goods) {
                  im.flag = false;
                }
                item.get_goods[0].flag = true;
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goshopDetail(fid, zid) {
      console.log(fid, zid);
      // 跳转商品详情
      this.$router.push({
        path: "/page/details",
        query: {
          num: 0,
          fid: fid,
          zid: zid,
        },
      });
    },
    goDetails(n) {
      // 跳转产品页
      this.$router.push({
        path: "/page/product_mobile",
        query: {
          num: n,
        },
      });
    },
    goCk() {
      this.$router.push({
        path: "/page/witness_mobile",
        query: {},
      });
    },
    goNews(id) {
      this.$router.push({
        path: "/page/newsDetail_mobile",
        query: {
          id: id,
        },
      });
    },
    getNews(num) {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/home?type=" + num)
        .then((res) => {
          if (num === 0) {
            console.log("新闻资讯", res.data.result);
            this.newsList = res.data.result;
            this.khjzdata = this.newsList[0].get_article;
          }
          if (num === 1) {
            console.log("客户见证", res.data.result);
            this.khjzList = res.data.result;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goimmediately() {
      this.$router.push({ path: "/page/about_mobile?num=6" });
    },
    chakan() {
      this.$router.push({ path: "/page/news_mobile" });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#homer {
  width: 100%;
  max-width: 7.5rem;
  margin: 0 auto;
}
/* 头部开始*/
.top {
  width: 7rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.logo0 {
  float: left;
  margin-top: 0.05rem;
  overflow: hidden;
}
.logo0 img {
  width: 1.3rem;
  height: 1rem;
}
.wan {
  width: 4.5rem;
  float: right;
  margin-top: 0.05rem;
  margin-left: 0.1rem;
  overflow: hidden;
}
.wld {
  font-size: 0.35rem;
  color: #333;
  font-weight: bold;
  text-align: center;
}
.tell {
  text-align: center;
  font-size: 0.3rem;
  font-weight: bold;
  color: #0361ab;
  font-style: normal;
}
/* 头部结束*/
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li {
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background-color: #d6af62;
}
.menu img {
  width: 0.8rem;
}
/* 导航结束*/
/* 主体开始 */
.body1 {
  margin: 0 auto;
}
.swiper img {
  width: 100%;
  height: 4rem;
  object-fit: cover;
}
.sousuo0 {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
}
.sousuo0>span {
  display: block;
  font-size: 0.25rem;
}
.papa {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.sskk1 {
  line-height: 0.5rem;
  background: #e5e5e5;
  border: 0 solid #fff;
}
.sskk2 {
  text-align: center;
  line-height: 0.5rem;
  width: 1rem;
  color: #fff;
  border: 0;
  background: #0061ae;
}
.xuqiu {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
  margin-top: 0.1rem;
}
.xuqiu h1 {
  font-size: 0.35rem;
  font-weight: bold;
}
.xuqiu p {
  font-size: 0.25rem;
  margin-bottom: 0.1rem;
}
.xuqiutu img {
  width: 7.5rem;
  overflow: hidden;
}
/* 主体结束 */
/*优势开始*/
.advantage {
  width: 7.5rem;
  margin: 0 auto;
  overflow: hidden;
}
.advantage img {
  width: 7.5rem;
}

/*优势结束*/
/*横幅开始*/
.slogann {
  background: #0061ae;
}
.hfk {
  width: 7rem;
  height: 2.1rem;
  margin: 0 auto;
}
.dianhua {
  padding-top: 0.35rem;
  padding-left: 0.5rem;
}
.dianhua img {
  float: left;
  width: 0.6rem;
  height: 0.6rem;
  overflow: hidden;
}
.dianhua h2 {
  float: left;
  font-size: 0.35rem;
  font-weight: bold;
  color: #fff;
  margin-left: 0.1rem;
  padding-top: 0.05rem;
  overflow: hidden;
}
.zixun {
  font-size: 0.3rem;
  color: #fff;
  padding: 0.05rem 0.5rem;
  background-color: #d6af62;
  border: 0;
  border-radius: 0.2rem;
  margin-top: 0.3rem;
  margin-left: 1.5rem;
  overflow: hidden;
}
/*横幅结束*/
/* 产品中心开始 */
.product {
  width: 7rem;
  margin: 0 auto;
}
.product_top {
  text-align: center;
  margin-top: 0.1rem;
}
.product_top h1 {
  font-size: 0.35rem;
  font-weight: bold;
}
.product_top p {
  font-size: 0.25rem;
  padding: 0.2rem;
}
.product1 {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.list0 {
  width: 4.55rem;
  display: flex;
  /* justify-content: space-between; */
  overflow: hidden;
}
.list1 {
  width: 2.2rem;
  height: 3rem;
  background-image: linear-gradient(to right, #eeeeee, #e2e2e2);
  margin-right: 2px;
}
.splb1 {
  height: 2.5rem;
}
.splb1 img {
  width: 100%;
  height: 2.5rem;
  /* border: 1px #666 solid; */
}
.splb2 p {
  font-size: 0.25rem;
  text-align: center;
  font-weight: bold;
}
.more1 {
  width: 2.25rem;
  height: 3rem;
  margin-bottom: 0.15rem;
  overflow: hidden;
  background: #969696;
  text-align: center;
}
.more1 p {
  color: #fff;
  padding-top: 1rem;
  margin-bottom: 0.2rem;
}
.more1 span {
  color: #fff;
  background: #0061ae;
  padding: 0rem 0.3rem;
}

/* 产品中心结束 */
/* 更多开始 */
.more img {
  display: block;
  width: 7.5rem;
}
/* 更多结束 */
/*资质开始*/
.tions {
  width: 7rem;
  margin: 0 auto;
}
.tions h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
  text-align: center;
  font-weight: bold;
}
.tions p {
  text-align: center;
  font-size: 0.25rem;
  padding: 0.1rem;
}
.tions2 ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.tions2 li {
  padding: 5px 5px;
}
.tions2 img {
  width: 1.5rem;
}
.tions4 img {
  width: 1.1rem;
}
.tions4 ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.tions4 li {
  padding: 0.05rem;
}
.tions2 li,
.tions4 li {
  transition: 0.3s all ease;
  position: relative;
}
.tions2 li:hover {
  transform: scale(1.1);
  z-index: 1;
  background: #fff;
}
.tions4 li:hover {
  transform: scale(1.2);
  z-index: 1;
  background: #fff;
}

/*资质结束*/
/* 客户见证开始 */
.witness_top {
  width: 7rem;
  text-align: center;
  margin: 0 auto;
}
.witness_top h1 {
  font-size: 0.35rem;
  font-weight: bold;
}
.witness_top p {
  font-size: 0.25rem;
  margin-top: 0.1rem;
}
.witness_foot {
  margin: 0 auto;
  width: 7.5rem;
  height: 4.75rem;
  background: darkgray;
  text-align: center;
  margin-top: 0.1rem;
}
.witness_foot img {
  width: 7rem;
  margin-top: 0.25rem;
}
.btn {
  display: block;
  background: #0061ae;
  color: #fff;
  border: 0;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.25rem;
}
/* 客户见证结束 */
/* 交易开始 */
.transaction {
  height: 4rem;
  margin: 0 auto;
  background: url("../assets/top.jpg") no-repeat;
  background-position:center center;
  background-size: cover;
  text-align: center;
  position: relative;
}
/* .transaction img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */
.transaction h1 {
  font-size: 0.3rem;
  font-weight: bold;
}
.transaction p {
  font-size: 0.25rem;
}
/* 交易结束 */
/* 大卖场动态开始 */
.dynamic_top {
  width: 7.5rem;
  height: 0.8rem;
  margin: 0 auto;
  background: #0061ae;
  overflow: hidden;
}
.dynamic-left p {
  float: left;
  overflow: hidden;
  line-height: 0.8rem;
  color: #fff;
}
.dynamic-right p {
  float: right;
  line-height: 0.8rem;
  color: #fff;
}
.dynamic-left p {
  display: block;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  color: #fff;
}
.dynamic-right p {
  display: block;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  color: #fff;
}
.active {
  color: #ffffff;
  background-color: #d6af62;
}
.dynamic-left p:hover,
.dynamic-left p:active {
  text-decoration: none;
  color: #ffffff;
  background-color: #d6af62;
}
.dynamic-right p:hover,
.dynamic-right p:active {
  text-decoration: none;
  color: #ffffff;
  background-color: #d6af62;
}
.dynamic_foot {
  width: 7rem;
  margin: 0 auto;
}
.dynamic_foot span {
  float: right;
  color: #666;
  overflow: hidden;
}
.dynamic_foot ul li {
  list-style-type: circle;
  list-style-position: inside;
  color: #666;
  padding: 0.2rem 0rem;
  overflow: hidden;
}
.cha {
  display: block;
  font-size: 0.3rem;
  margin: 0 auto;
  padding: 0rem 0.3rem;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
}
/* 大卖场动态结束 */
/* 关于我们开始 */
.about_top{
  position: relative;
  height: 6.4rem;
}
.about_top img{
  position: absolute;
  top: 0;
  left: 0;
}
.about_con{
  position: absolute;
  width: 84%;
  top: 1.2rem;
  left: 50%;
  margin-left: -42%;
}
.contitle{
  font-weight: bold;
  text-align: center;
  padding: 0.2rem 0;
}
.contxt{
  height: 3.8rem;
  overflow-y: auto;
}
.about img {
  display: block;
  width: 7.5rem;
  margin: 0 auto;
}
.hezuo {
  position: absolute;
  font-size: 0.3rem;
  font-weight: bold;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.about_foot {
  width: 7.5rem;
  margin: 0 auto;
}
.about_foot img {
  width: 1.8rem;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
}
.swiper1 {
  width: 7rem;
}
.ondyswiper {
  width: 7.5rem;
  position: relative;
}
.swiper-button-prev {
  position: absolute;
  left: 0;
}
.swiper-button-next {
  position: absolute;
  right: 0;
}
/* 关于我们结束 */
/* 页脚开始 */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who {
  width: 7rem;
  margin: 0 auto;
}
.whoo {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
}
/* 页脚结束 */
</style>